import { useRef } from 'react'
import { VChart } from '@visactor/react-vchart'

// 横竖轴设置
const setFields = (direction, group) => {
    let xField, yField
    if (direction === 'vertical') {
        xField = group ? ['type', 'name'] : 'type'
        yField = 'value'
    } else {
        xField = 'value'
        yField = group ? ['type', 'name'] : 'type'
    }
    return { xField, yField }
}

// !!!      VChart图例
// Todo     折现 面积 柱形 条形
export const VChartA01 = ({ data, style, field }) => {
    const chartRef = useRef()
    const { type, stack, group, direction, percent, background, padding,
        axes_setUp, legends_setUp, mark_line, mark_point, scroll_Bar, barWidth, barGapInGroup
    } = style
    const { xField, yField } = setFields(direction, group)
    const color = field.map(item => item.color)


    // 轴
    const axes = axes_setUp.map(item => ({
        animation: true,
        sampling: false,
        orient: item.orient,
        hover: item.hover,
        trimPadding: item.trimPadding,
        title: {
            visible: item.title_visible,
            space: item.title_space,
            text: item.title_text,
            style: {
                fill: item.title_fill,
                fontSize: item.title_fontSize,
                fontFamily: item.title_fontFamily,
                fontWeight: item.title_fontWeight,
                fontStyle: item.title_fontStyle,
                underline: item.title_underline,
                lineThrough: item.title_lineThrough,
                shadowColor: item.title_shadowColor,
                shadowBlur: item.title_shadowBlur,
                shadowOffsetX: item.title_shadowOffsetX,
                shadowOffsetY: item.title_shadowOffsetY,
                stroke: item.title_stroke,
                lineWidth: item.title_lineWidth
            }
        },
        tick: {
            visible: item.tick_visible,
            tickSize: item.tick_tickSize,
            style: { stroke: item.tick_stroke }
        },
        domainLine: {
            visible: item.domainLine_visible,
            style: { stroke: item.domainLine_stroke }
        },
        grid: {
            visible: item.grid_visible,
            style: {
                stroke: item.grid_stroke,
                lineDash: [item.grid_lineDashA, item.grid_lineDashB],
            }
        },
        label: {
            visible: item.label_visible,
            formatMethod: val => `${val} ${item.label_text || ''}`,
            autoRotate: true,
            style: {
                fill: item.label_fill,
                fontSize: item.label_fontSize,
                fontFamily: item.label_fontFamily,
                fontWeight: item.label_fontWeight,
                fontStyle: item.label_fontStyle,
                underline: item.label_underline,
                lineThrough: item.label_lineThrough,
                shadowColor: item.label_shadowColor,
                shadowBlur: item.label_shadowBlur,
                shadowOffsetX: item.label_shadowOffsetX,
                shadowOffsetY: item.label_shadowOffsetY,
                stroke: item.label_stroke,
                lineWidth: item.label_lineWidth,
            }
        },
        unit: {
            visible: item.unit_visible,
            text: item.unit_text,
            style: {
                dx: item.unit_dx,
                dy: item.unit_dy,
                fill: item.unit_fill,
                fontSize: item.unit_fontSize,
                fontFamily: item.unit_fontFamily,
                fontWeight: item.unit_fontWeight,
                fontStyle: item.unit_fontStyle,
                underline: item.unit_underline,
                lineThrough: item.unit_lineThrough,
                shadowColor: item.unit_shadowColor,
                shadowBlur: item.unit_shadowBlur,
                shadowOffsetX: item.unit_shadowOffsetX,
                shadowOffsetY: item.unit_shadowOffsetY,
                stroke: item.unit_stroke,
                lineWidth: item.unit_lineWidth,
            }
        }
    }))

    // 标题
    const title = {
        visible: style.title_visible,
        text: style.title_text,
        align: style.title_align,
        innerPadding: style.title_innerPadding,
        textStyle: {
            fill: style.title_fill,
            fontSize: style.title_fontSize,
            fontFamily: style.title_fontFamily,
            fontWeight: style.title_fontWeight,
            fontStyle: style.title_fontStyle,
            textAlign: style.title_textAlign,
            textBaseline: style.title_textBaseline,
            underline: style.title_underline,
            lineThrough: style.title_lineThrough,
            shadowColor: style.title_shadowColor,
            shadowBlur: style.title_shadowBlur,
            shadowOffsetX: style.title_shadowOffsetX,
            shadowOffsetY: style.title_shadowOffsetY,
            background: style.title_background,
            stroke: style.title_stroke,
            lineWidth: style.title_lineWidth,
        }
    }
    // 图例
    const legends = legends_setUp.map(item => ({
        visible: item.visible,
        orient: item.orient,
        position: item.position,
        padding: item.padding,
        selectMode: item.selectMode,
        allowAllCanceled: item.allowAllCanceled,
        select: item.select,
        title: {
            visible: item.title_visible,
            text: item.title_text,
            align: item.title_align,
            space: item.title_space,
            textStyle: {
                fill: item.title_fill,
                fontSize: item.title_fontSize,
                fontFamily: item.title_fontFamily,
                fontWeight: item.title_fontWeight,
                fontStyle: item.title_fontStyle,
                underline: item.title_underline,
                lineThrough: item.title_lineThrough,
                textAlign: item.title_textAlign,
                textBaseline: item.title_textBaseline,
                shadowColor: item.title_shadowColor,
                shadowBlur: item.title_shadowBlur,
                shadowOffsetX: item.title_shadowOffsetX,
                shadowOffsetY: item.title_shadowOffsetY,
                background: item.title_background,
                stroke: item.title_stroke,
                lineWidth: item.title_lineWidth,
            }
        },
        item: {
            spaceCol: item.item_spaceCol,
            spaceRow: item.item_spaceRow,
            padding: item.item_padding,
            align: item.item_align,
            focus: item.item_focus,
            focusIconStyle: { size: item.item_focusSize },
            background: { style: { cornerRadius: item.item_backRadius } },
            shape: {
                space: item.item_shape_space,
                style: { size: item.item_shape_size }
            },
            label: {
                space: item.item_label_space,
                style: {
                    cursor: 'pointer',
                    fill: item.item_label_fill,
                    fontSize: item.item_label_fontSize,
                    fontFamily: item.item_label_fontFamily,
                    fontWeight: item.item_label_fontWeight,
                    fontStyle: item.item_label_fontStyle,
                    underline: item.item_label_underline,
                    lineThrough: item.item_label_lineThrough,
                    shadowColor: item.item_label_shadowColor,
                    shadowBlur: item.item_label_shadowBlur,
                    shadowOffsetX: item.item_label_shadowOffsetX,
                    shadowOffsetY: item.item_label_shadowOffsetY,
                    stroke: item.item_label_stroke,
                    lineWidth: item.item_label_lineWidth,
                }
            }
        }
    }))
    // 标签配置
    const label = {
        visible: style.label_visible,
        position: style.label_position,
        formatter: style.label_formatter,
        offset: style.label_offset,
        overlap: style.label_overlap,
        smartInvert: style.label_smartInvert,
        style: {
            direction: style.label_direction,
            maxLineWidth: style.label_maxLineWidth,
            fillOpacity: style.label_fillOpacity,
            fontSize: style.label_fontSize,
            fontFamily: style.label_fontFamily,
            fontWeight: style.label_fontWeight,
            fontStyle: style.label_fontStyle,
            underline: style.label_underline,
            lineThrough: style.label_lineThrough,
            suffixPosition: style.label_suffixPosition,
            shadowColor: style.label_shadowColor,
            shadowBlur: style.label_shadowBlur,
            shadowOffsetX: style.label_shadowOffsetX,
            shadowOffsetY: style.label_shadowOffsetY,
            stroke: style.label_stroke,
            lineWidth: style.label_lineWidth
        }
    }
    // 提示设置
    const tooltip = {
        visible: style.tooltip_visible,
        trigger: style.tooltip_trigger,

        // 原图
        mark: {
            visible: style.tooltip_mark_visible,
            position: style.tooltip_mark_position,
            positionMode: style.tooltip_mark_positionMode,
        },

        // 纬度图
        dimension: {
            visible: style.tooltip_dimension_visible,
            position: style.tooltip_dimension_position,
            positionMode: style.tooltip_dimension_positionMode,
        },
        style: {
            panel: {  // 背景框
                padding: style.tooltip_panel_padding,
                backgroundColor: style.tooltip_panel_backgroundColor,
                border: {
                    color: style.tooltip_panel_borderColor,
                    width: style.tooltip_panel_borderWidth,
                    radius: style.tooltip_panel_borderRadius
                },
                shadow: {
                    x: style.tooltip_panel_shadowX,
                    y: style.tooltip_panel_shadowY,
                    blur: style.tooltip_panel_shadowBlur,
                    color: style.tooltip_panel_shadowColor,
                    spread: style.tooltip_panel_shadowSpread,
                }
            },
            titleLabel: {
                fontSize: style.tooltip_titleLabel_fontSize,
                fontFamily: style.tooltip_titleLabel_fontFamily,
                fontColor: style.tooltip_titleLabel_fontColor,
                fontWeight: style.tooltip_titleLabel_fontWeight,
                textAlign: style.tooltip_titleLabel_textAlign,
            },
            shape: {
                size: style.tooltip_shape_size,
                spacing: style.tooltip_shape_spacing
            },
            keyLabel: {
                fontSize: style.tooltip_keyLabel_fontSize,
                fontFamily: style.tooltip_keyLabel_fontFamily,
                fontColor: style.tooltip_keyLabel_fontColor,
                fontWeight: style.tooltip_keyLabel_fontWeight,
                textAlign: style.tooltip_keyLabel_textAlign,
                spacing: style.tooltip_keyLabel_tspacing
            },
            valueLabel: {
                fontSize: style.tooltip_valueLabel_fontSize,
                fontColor: style.tooltip_valueLabel_fontColor,
                textAlign: style.tooltip_valueLabel_textAlign,
                fontFamily: style.tooltip_valueLabel_fontFamily,
                fontWeight: style.tooltip_valueLabel_fontWeight,
                spacing: style.tooltip_valueLabel_tspacing
            },
            spaceRow: style.tooltip_spaceRow
        }
    }
    // 指示器设置
    const crosshair = {
        trigger: style.crosshair_trigger,
        xField: {
            visible: style.crosshair_X_visible,
            line: {
                visible: style.crosshair_X_lineVisible,
                type: style.crosshair_X_lineType,
                style: {
                    fill: style.crosshair_X_lineFill,
                    stroke: style.crosshair_X_lineStroke,
                    lineWidth: style.crosshair_X_lineLineWidth,
                    lineDash: [style.crosshair_X_lineLineDashA, style.crosshair_X_lineLineDashB]
                }
            },
            label: {
                visible: style.crosshair_X_labelVisible,
                style: {
                    background: style.crosshair_X_labelBackground,
                    fill: style.crosshair_X_labelFill,
                    fontSize: style.crosshair_X_labelFontSize,
                    fontFamily: style.crosshair_X_labelFontFamily,
                    fontWeight: style.crosshair_X_labelFontWeight,
                    fontStyle: style.crosshair_X_labelFontStyle,
                    textAlign: style.crosshair_X_labelTextAlign,
                    textBaseline: style.crosshair_X_labelTextBaseline,
                    underline: style.crosshair_X_labelUnderline,
                    lineThrough: style.crosshair_X_labelLineThrough,
                    shadowColor: style.crosshair_X_labelShadowColor,
                    shadowBlur: style.crosshair_X_labelShadowBlur,
                    shadowOffsetX: style.crosshair_X_labelShadowOffsetX,
                    shadowOffsetY: style.crosshair_X_labelShadowOffsetY,
                    stroke: style.crosshair_X_labelStroke,
                    lineWidth: style.crosshair_X_labelLineWidth,
                }
            },
        },
        yField: {
            visible: style.crosshair_Y_visible,
            line: {
                visible: style.crosshair_Y_lineVisible,
                type: style.crosshair_Y_lineType,
                style: {
                    fill: style.crosshair_Y_lineFill,
                    stroke: style.crosshair_Y_lineStroke,
                    lineWidth: style.crosshair_Y_lineLineWidth,
                    lineDash: [style.crosshair_Y_lineLineDashA, style.crosshair_Y_lineLineDashB]
                }
            },
            label: {
                visible: style.crosshair_Y_labelVisible,
                style: {
                    background: style.crosshair_Y_labelBackground,
                    fill: style.crosshair_Y_labelFill,
                    fontSize: style.crosshair_Y_labelFontSize,
                    fontFamily: style.crosshair_Y_labelFontFamily,
                    fontWeight: style.crosshair_Y_labelFontWeight,
                    fontStyle: style.crosshair_Y_labelFontStyle,
                    textAlign: style.crosshair_Y_labelTextAlign,
                    textBaseline: style.crosshair_Y_labelTextBaseline,
                    underline: style.crosshair_Y_labelUnderline,
                    lineThrough: style.crosshair_Y_labelLineThrough,
                    shadowColor: style.crosshair_Y_labelShadowColor,
                    shadowBlur: style.crosshair_Y_labelShadowBlur,
                    shadowOffsetX: style.crosshair_Y_labelShadowOffsetX,
                    shadowOffsetY: style.crosshair_Y_labelShadowOffsetY,
                    stroke: style.crosshair_Y_labelStroke,
                    lineWidth: style.crosshair_Y_labelLineWidth,
                }
            },
        },
    }

    // 线段&面积图元
    const line = {
        visible: style.line_visible,
        style: {
            cursor: 'pointer',
            lineDash: [0, 0],
            curveType: style.line_curveType,
            lineWidth: style.line_lineWidth,
            opacity: style.line_opacity,
            shadowColor: style.line_shadowColor,
            shadowBlur: style.line_shadowBlur,
            shadowOffsetX: style.line_shadowOffsetX,
            shadowOffsetY: style.line_shadowOffsetY,
        }
    }
    // 图元样式
    const point = {
        visible: style.point_visible,
        style: {
            stroke: null,
            cursor: 'pointer',
            symbolType: style.point_symbolType,
            size: style.point_size,
            lineWidth: style.point_lineWidth,
            fill: style.point_fill,
            fillOpacity: style.point_fillOpacity,
            shadowColor: style.point_shadowColor,
            shadowBlur: style.point_shadowBlur,
            shadowOffsetX: style.point_shadowOffsetX,
            shadowOffsetY: style.point_shadowOffsetY,
        },
        state: {
            dimension_hover: {
                symbolType: style.point_hover_symbolType,
                size: style.point_hover_size
            }
        }
    }
    // 折线&面积  标签
    const lineLabel = {
        visible: style.lineLabel_visible,
        style: {
            fontSize: style.lineLabel_fontSize,
            fontFamily: style.lineLabel_fontFamily,
            fontWeight: style.lineLabel_fontWeight,
            fontStyle: style.lineLabel_fontStyle,
            underline: style.lineLabel_underline,
            lineThrough: style.lineLabel_lineThrough,
            shadowColor: style.lineLabel_shadowColor,
            shadowBlur: style.lineLabel_shadowBlur,
            shadowOffsetX: style.lineLabel_shadowOffsetX,
            shadowOffsetY: style.lineLabel_shadowOffsetY,
            stroke: style.lineLabel_stroke,
            lineWidth: style.lineLabel_lineWidth,
        }
    }
    // 柱图&条图图元
    const bar = {
        visible: style.bar_visible,
        style: {
            cornerRadius: style.bar_cornerRadius,
            shadowColor: style.bar_shadowColor,
            shadowBlur: style.bar_shadowBlur,
            shadowOffsetX: style.bar_shadowOffsetX,
            shadowOffsetY: style.bar_shadowOffsetY,
        }
    }
    // 柱图&条图  背景
    const barBackground = {
        visible: style.barBack_visible,
        style: {
            cornerRadius: style.barBack_cornerRadius,
            fill: style.barBack_fill
        }
    }
    // 总计标签
    const totalLabel = {
        visible: style.totalLabel_visible,
        style: {
            fill: style.totalLabel_fill,
            fontSize: style.totalLabel_fontSize,
            fontFamily: style.totalLabel_fontFamily,
            fontWeight: style.totalLabel_fontWeight,
            fontStyle: style.totalLabel_fontStyle,
            underline: style.totalLabel_underline,
            lineThrough: style.totalLabel_lineThrough,
            fillOpacity: style.totalLabel_fillOpacity,
            shadowColor: style.totalLabel_shadowColor,
            shadowBlur: style.totalLabel_shadowBlur,
            shadowOffsetX: style.totalLabel_shadowOffsetX,
            shadowOffsetY: style.totalLabel_shadowOffsetY,
            stroke: style.totalLabel_stroke,
            lineWidth: style.totalLabel_lineWidth
        }
    }
    // 数据标注线
    const markLine = mark_line.map(item => ({
        endSymbol: { visible: false },
        visible: item.visible,
        [item.axes]: item.number,
        line: {
            style: {
                stroke: item.line_stroke,
                strokeOpacity: item.line_strokeOpacity,
                lineDash: [item.line_lineDashA, item.line_lineDashB],
                lineWidth: item.line_lineWidth,
                shadowColor: item.line_shadowColor,
                shadowBlur: item.line_shadowBlur,
                shadowOffsetX: item.line_shadowOffsetX,
                shadowOffsetY: item.line_shadowOffsetY,
            }
        },
        label: {
            visible: item.label_visible,
            position: item.label_position,
            refX: item.label_refX,
            refY: item.label_refY,
            style: {
                text: item.label_text,
                fill: item.label_fill,
                fontSize: item.label_fontSize,
                fontFamily: item.label_fontFamily,
                fontWeight: item.label_fontWeight,
                fontStyle: item.label_fontStyle,
                underline: item.label_underline,
                lineThrough: item.label_lineThrough,
                fillOpacity: item.label_fillOpacity,
                shadowColor: item.label_shadowColor,
                shadowBlur: item.label_shadowBlur,
                shadowOffsetX: item.label_shadowOffsetX,
                shadowOffsetY: item.label_shadowOffsetY,
                stroke: item.label_stroke,
                lineWidth: item.label_lineWidth
            }
        }
    })
    )
    // 数据标注点
    const markPoint = mark_point.map(item => ({
        visible: item.visible,
        coordinate: { type: item.coordinate_type, value: item.coordinate_value },
        targetSymbol: {
            visible: item.targetSymbol_visible,
            offset: item.targetSymbol_offset,
            style: {
                symbolType: item.targetSymbol_symbolType,
                size: item.targetSymbol_size,
                fill: item.targetSymbol_fill,
                fillOpacity: item.targetSymbol_fillOpacity,
                shadowColor: item.targetSymbol_shadowColor,
                shadowBlur: item.targetSymbol_shadowBlur,
                shadowOffsetX: item.targetSymbol_shadowOffsetX,
                shadowOffsetY: item.targetSymbol_shadowOffsetY,
                stroke: item.targetSymbol_stroke,
                lineWidth: item.targetSymbol_lineWidth
            }
        },
        itemLine: {
            visible: item.itemLine_visible,
            type: item.itemLine_type,
            arcRatio: item.itemLine_arcRatio, // 弧线幅度
            startSymbol: {
                visible: item.itemLine_startSymbol_visible,
                size: item.itemLine_startSymbol_size,
                style: {
                    fill: item.itemLine_startSymbol_fill,
                    symbolType: item.itemLine_startSymbol_symbolType,
                    shadowColor: item.itemLine_startSymbol_shadowColor,
                    shadowBlur: item.itemLine_startSymbol_shadowBlur,
                    shadowOffsetX: item.itemLine_startSymbol_shadowOffsetX,
                    shadowOffsetY: item.itemLine_startSymbol_shadowOffsetY,
                }
            },
            endSymbol: {
                visible: item.itemLine_endSymbol_visible,
                size: item.itemLine_endSymbol_size,
                style: {
                    fill: item.itemLine_endSymbol_fill,
                    symbolType: item.itemLine_endSymbol_symbolType,
                    shadowColor: item.itemLine_endSymbol_shadowColor,
                    shadowBlur: item.itemLine_endSymbol_shadowBlur,
                    shadowOffsetX: item.itemLine_endSymbol_shadowOffsetX,
                    shadowOffsetY: item.itemLine_endSymbol_shadowOffsetY,
                }
            },
            line: {
                style: {
                    stroke: item.itemLine_line_stroke,
                    lineWidth: item.itemLine_line_lineWidth,
                    lineDash: [item.itemLine_line_lineDashA, item.itemLine_line_lineDashB],
                    shadowColor: item.itemLine_line_shadowColor,
                    shadowBlur: item.itemLine_line_shadowBlur,
                    shadowOffsetX: item.itemLine_line_shadowOffsetX,
                    shadowOffsetY: item.itemLine_line_shadowOffsetY,
                }
            }
        },
        itemContent: {
            type: 'text',
            position: item.itemContent_position,
            offsetX: item.itemContent_offsetX,
            offsetY: item.itemContent_offsetY,
            autoRotate: item.itemContent_autoRotate, // 自动旋转
            text: {
                style: {
                    text: item.itemContent_text,
                    fill: item.itemContent_fill,
                    fontSize: item.itemContent_fontSize,
                    fontFamily: item.itemContent_fontFamily,
                    fontWeight: item.itemContent_fontWeight,
                    fontStyle: item.itemContent_fontStyle,
                    underline: item.itemContent_underline,
                    lineThrough: item.itemContent_lineThrough,
                    fillOpacity: item.itemContent_fillOpacity,
                    shadowColor: item.itemContent_shadowColor,
                    shadowBlur: item.itemContent_shadowBlur,
                    shadowOffsetX: item.itemContent_shadowOffsetX,
                    shadowOffsetY: item.itemContent_shadowOffsetY,
                    stroke: item.itemContent_stroke,
                    lineWidth: item.itemContent_lineWidth
                }
            }
        },
    }))
    // 滚动条
    const scrollBar = scroll_Bar.map(item => ({
        innerPadding: 0,
        visible: item.visible,
        orient: item.orient,
        start: item.start,
        end: item.end,
        roamDrag: {
            rate: item.roamDrag_rate,
            enable: item.roamDrag_reverse
        },
        roamZoom: {
            rate: item.roamZoom_rate,
            enable: item.roamZoom_focus
        },
        rail: {
            style: {
                cornerRadius: item.rail_cornerRadius,
                fill: item.rail_fill,
                shadowColor: item.rail_shadowColor,
                shadowBlur: item.rail_shadowBlur,
                shadowOffsetX: item.rail_shadowOffsetX,
                shadowOffsetY: item.rail_shadowOffsetY,
            }
        },
        slider: {
            style: {
                cornerRadius: item.slider_cornerRadius,
                fill: item.slider_fill,
                shadowColor: item.slider_shadowColor,
                shadowBlur: item.slider_shadowBlur,
                shadowOffsetX: item.slider_shadowOffsetX,
                shadowOffsetY: item.slider_shadowOffsetY,
            }
        }
    }))

    const spec = {
        // 基础配置
        type,
        stack,
        direction,
        xField,
        yField,
        barWidth,
        barGapInGroup,
        percent,
        seriesField: 'name',
        data: { values: data },
        background,
        padding,
        color,
        axes,
        title,
        legends,
        label,
        crosshair,
        tooltip,
        totalLabel,

        // todo 折线配置
        bar,
        line,
        point,
        lineLabel,
        areaLabel: lineLabel,
        barBackground,

        // todo 注记 
        markLine,
        markPoint,
        // todo 滚动条
        scrollBar,

    };


    return <VChart className='ChartsClass' ref={chartRef} spec={spec}
        options={{
            disableDirtyBounds: true,
            options3d: {
                enable: true,
                enableView3dTransform: true,
                center: { x: 500, y: 250 }
            }
        }} />
}
// Todo     饼图 环图 玫瑰图 雷达图
export const VChartA02 = ({ data, style, field }) => {
    const chartRef = useRef()
    const {
        type, stack, group, categoryField, valueField, seriesField, background, padding, outerRadius, innerRadius,
        legends_setUp, axes_setUp, colorPalette
    } = style
    const color = type === 'pie' ? colorPalette.map(item => item.color) : field.map(item => item.color)
    const title = {
        visible: style.title_visible,
        text: style.title_text,
        align: style.title_align,
        innerPadding: style.title_innerPadding,
        textStyle: {
            fill: style.title_fill,
            fontSize: style.title_fontSize,
            fontFamily: style.title_fontFamily,
            fontWeight: style.title_fontWeight,
            fontStyle: style.title_fontStyle,
            textAlign: style.title_textAlign,
            textBaseline: style.title_textBaseline,
            underline: style.title_underline,
            lineThrough: style.title_lineThrough,
            shadowColor: style.title_shadowColor,
            shadowBlur: style.title_shadowBlur,
            shadowOffsetX: style.title_shadowOffsetX,
            shadowOffsetY: style.title_shadowOffsetY,
            background: style.title_background,
            stroke: style.title_stroke,
            lineWidth: style.title_lineWidth,
        }
    }
    const axes = axes_setUp.map(item => ({
        animation: true,
        sampling: false,
        visible: item.visible,
        orient: item.orient,
        hover: item.hover,
        trimPadding: item.trimPadding,
        title: {
            visible: item.title_visible,
            space: item.title_space,
            text: item.title_text,
            style: {
                fill: item.title_fill,
                fontSize: item.title_fontSize,
                fontFamily: item.title_fontFamily,
                fontWeight: item.title_fontWeight,
                fontStyle: item.title_fontStyle,
                underline: item.title_underline,
                lineThrough: item.title_lineThrough,
                shadowColor: item.title_shadowColor,
                shadowBlur: item.title_shadowBlur,
                shadowOffsetX: item.title_shadowOffsetX,
                shadowOffsetY: item.title_shadowOffsetY,
                stroke: item.title_stroke,
                lineWidth: item.title_lineWidth
            }
        },
        tick: {
            visible: item.tick_visible,
            tickSize: item.tick_tickSize,
            style: {
                stroke: item.tick_stroke,
            }
        },
        domainLine: {
            visible: item.domainLine_visible,
            style: {
                stroke: item.domainLine_stroke,
            }
        },
        grid: {
            visible: item.grid_visible,
            style: {
                stroke: item.grid_stroke,
                lineDash: [item.grid_lineDashA, item.grid_lineDashB],
            }
        },
        label: {
            visible: item.label_visible,
            formatMethod: val => `${val} ${item.label_text || ''}`,
            autoRotate: true,

            style: {
                fill: item.label_fill,
                fontSize: item.label_fontSize,
                fontFamily: item.label_fontFamily,
                fontWeight: item.label_fontWeight,
                fontStyle: item.label_fontStyle,
                underline: item.label_underline,
                lineThrough: item.label_lineThrough,
                shadowColor: item.label_shadowColor,
                shadowBlur: item.label_shadowBlur,
                shadowOffsetX: item.label_shadowOffsetX,
                shadowOffsetY: item.label_shadowOffsetY,
                stroke: item.label_stroke,
                lineWidth: item.label_lineWidth,
            }
        },
        unit: {
            visible: item.unit_visible,
            text: item.unit_text,
            style: {
                dx: item.unit_dx,
                dy: item.unit_dy,
                fill: item.unit_fill,
                fontSize: item.unit_fontSize,
                fontFamily: item.unit_fontFamily,
                fontWeight: item.unit_fontWeight,
                fontStyle: item.unit_fontStyle,
                underline: item.unit_underline,
                lineThrough: item.unit_lineThrough,
                shadowColor: item.unit_shadowColor,
                shadowBlur: item.unit_shadowBlur,
                shadowOffsetX: item.unit_shadowOffsetX,
                shadowOffsetY: item.unit_shadowOffsetY,
                stroke: item.unit_stroke,
                lineWidth: item.unit_lineWidth,
            }
        }
    }))
    const legends = legends_setUp.map(item => ({
        visible: item.visible,
        orient: item.orient,
        position: item.position,
        padding: item.padding,
        selectMode: item.selectMode,
        allowAllCanceled: item.allowAllCanceled,
        select: item.select,
        title: {
            visible: item.title_visible,
            text: item.title_text,
            align: item.title_align,
            space: item.title_space,
            textStyle: {
                fill: item.title_fill,
                fontSize: item.title_fontSize,
                fontFamily: item.title_fontFamily,
                fontWeight: item.title_fontWeight,
                fontStyle: item.title_fontStyle,
                underline: item.title_underline,
                lineThrough: item.title_lineThrough,
                textAlign: item.title_textAlign,
                textBaseline: item.title_textBaseline,
                shadowColor: item.title_shadowColor,
                shadowBlur: item.title_shadowBlur,
                shadowOffsetX: item.title_shadowOffsetX,
                shadowOffsetY: item.title_shadowOffsetY,
                background: item.title_background,
                stroke: item.title_stroke,
                lineWidth: item.title_lineWidth,
            }
        },
        item: {
            spaceCol: item.item_spaceCol,
            spaceRow: item.item_spaceRow,
            padding: item.item_padding,
            align: item.item_align,
            focus: item.item_focus,
            focusIconStyle: { size: item.item_focusSize },
            background: { style: { cornerRadius: item.item_backRadius } },
            shape: {
                space: item.item_shape_space,
                style: { size: item.item_shape_size }
            },
            label: {
                space: item.item_label_space,
                style: {
                    cursor: 'pointer',
                    fill: item.item_label_fill,
                    fontSize: item.item_label_fontSize,
                    fontFamily: item.item_label_fontFamily,
                    fontWeight: item.item_label_fontWeight,
                    fontStyle: item.item_label_fontStyle,
                    underline: item.item_label_underline,
                    lineThrough: item.item_label_lineThrough,
                    shadowColor: item.item_label_shadowColor,
                    shadowBlur: item.item_label_shadowBlur,
                    shadowOffsetX: item.item_label_shadowOffsetX,
                    shadowOffsetY: item.item_label_shadowOffsetY,
                    stroke: item.item_label_stroke,
                    lineWidth: item.item_label_lineWidth,
                }
            }
        }
    }))
    const label = {
        visible: style.label_visible,
        position: style.label_position,
        formatter: style.label_formatter,
        style: {
            type: 'text',
            fontSize: style.label_fontSize,
            fontFamily: style.label_fontFamily,
            fontWeight: style.label_fontWeight,
            fontStyle: style.label_fontStyle,
            underline: style.label_underline,
            lineThrough: style.label_lineThrough,
            shadowColor: style.label_shadowColor,
            shadowBlur: style.label_shadowBlur,
            shadowOffsetX: style.label_shadowOffsetX,
            shadowOffsetY: style.label_shadowOffsetY,
            stroke: style.label_stroke,
            lineWidth: style.label_lineWidth
        },
        line: {
            visible: style.label_line_visible,
            line1MinLength: style.label_line1MinLength,
            line2MinLength: style.label_line2MinLength,
            smooth: style.label_smooth,
        },
        layout: {
            align: style.label_align,
        }
    }
    const tooltip = {
        visible: style.tooltip_visible,
        trigger: style.tooltip_trigger,

        // 原图
        mark: {
            visible: style.tooltip_mark_visible,
            position: style.tooltip_mark_position,
            positionMode: style.tooltip_mark_positionMode,
        },

        // 纬度图
        dimension: {
            visible: style.tooltip_dimension_visible,
            position: style.tooltip_dimension_position,
            positionMode: style.tooltip_dimension_positionMode,
        },
        style: {
            panel: {  // 背景框
                padding: style.tooltip_panel_padding,
                backgroundColor: style.tooltip_panel_backgroundColor,
                border: {
                    color: style.tooltip_panel_borderColor,
                    width: style.tooltip_panel_borderWidth,
                    radius: style.tooltip_panel_borderRadius
                },
                shadow: {
                    x: style.tooltip_panel_shadowX,
                    y: style.tooltip_panel_shadowY,
                    blur: style.tooltip_panel_shadowBlur,
                    color: style.tooltip_panel_shadowColor,
                    spread: style.tooltip_panel_shadowSpread,
                }
            },
            titleLabel: {
                fontSize: style.tooltip_titleLabel_fontSize,
                fontFamily: style.tooltip_titleLabel_fontFamily,
                fontColor: style.tooltip_titleLabel_fontColor,
                fontWeight: style.tooltip_titleLabel_fontWeight,
                textAlign: style.tooltip_titleLabel_textAlign,
            },
            shape: {
                size: style.tooltip_shape_size,
                spacing: style.tooltip_shape_spacing
            },
            keyLabel: {
                fontSize: style.tooltip_keyLabel_fontSize,
                fontFamily: style.tooltip_keyLabel_fontFamily,
                fontColor: style.tooltip_keyLabel_fontColor,
                fontWeight: style.tooltip_keyLabel_fontWeight,
                textAlign: style.tooltip_keyLabel_textAlign,
                spacing: style.tooltip_keyLabel_tspacing
            },
            valueLabel: {
                fontSize: style.tooltip_valueLabel_fontSize,
                fontColor: style.tooltip_valueLabel_fontColor,
                textAlign: style.tooltip_valueLabel_textAlign,
                fontFamily: style.tooltip_valueLabel_fontFamily,
                fontWeight: style.tooltip_valueLabel_fontWeight,
                spacing: style.tooltip_valueLabel_tspacing
            },
            spaceRow: style.tooltip_spaceRow
        }
    }
    const crosshair = {
        trigger: style.crosshair_trigger,
        categoryField: {
            visible: style.crosshair_X_visible,
            line: {
                visible: style.crosshair_X_lineVisible,
                type: style.crosshair_X_lineType,
                style: {
                    fill: style.crosshair_X_lineFill,
                    stroke: style.crosshair_X_lineStroke,
                    lineWidth: style.crosshair_X_lineLineWidth,
                    lineDash: [style.crosshair_X_lineLineDashA, style.crosshair_X_lineLineDashB]
                }
            },
            label: {
                visible: style.crosshair_X_labelVisible,
                style: {
                    background: style.crosshair_X_labelBackground,
                    fill: style.crosshair_X_labelFill,
                    fontSize: style.crosshair_X_labelFontSize,
                    fontFamily: style.crosshair_X_labelFontFamily,
                    fontWeight: style.crosshair_X_labelFontWeight,
                    fontStyle: style.crosshair_X_labelFontStyle,
                    textAlign: style.crosshair_X_labelTextAlign,
                    textBaseline: style.crosshair_X_labelTextBaseline,
                    underline: style.crosshair_X_labelUnderline,
                    lineThrough: style.crosshair_X_labelLineThrough,
                    shadowColor: style.crosshair_X_labelShadowColor,
                    shadowBlur: style.crosshair_X_labelShadowBlur,
                    shadowOffsetX: style.crosshair_X_labelShadowOffsetX,
                    shadowOffsetY: style.crosshair_X_labelShadowOffsetY,
                    stroke: style.crosshair_X_labelStroke,
                    lineWidth: style.crosshair_X_labelLineWidth,
                }
            },
        },
        valueField: {
            visible: style.crosshair_Y_visible,
            line: {
                visible: style.crosshair_Y_lineVisible,
                type: style.crosshair_Y_lineType,
                style: {
                    fill: style.crosshair_Y_lineFill,
                    stroke: style.crosshair_Y_lineStroke,
                    lineWidth: style.crosshair_Y_lineLineWidth,
                    lineDash: [style.crosshair_Y_lineLineDashA, style.crosshair_Y_lineLineDashB]
                }
            },
            label: {
                visible: style.crosshair_Y_labelVisible,
                style: {
                    background: style.crosshair_Y_labelBackground,
                    fill: style.crosshair_Y_labelFill,
                    fontSize: style.crosshair_Y_labelFontSize,
                    fontFamily: style.crosshair_Y_labelFontFamily,
                    fontWeight: style.crosshair_Y_labelFontWeight,
                    fontStyle: style.crosshair_Y_labelFontStyle,
                    textAlign: style.crosshair_Y_labelTextAlign,
                    textBaseline: style.crosshair_Y_labelTextBaseline,
                    underline: style.crosshair_Y_labelUnderline,
                    lineThrough: style.crosshair_Y_labelLineThrough,
                    shadowColor: style.crosshair_Y_labelShadowColor,
                    shadowBlur: style.crosshair_Y_labelShadowBlur,
                    shadowOffsetX: style.crosshair_Y_labelShadowOffsetX,
                    shadowOffsetY: style.crosshair_Y_labelShadowOffsetY,
                    stroke: style.crosshair_Y_labelStroke,
                    lineWidth: style.crosshair_Y_labelLineWidth,
                }
            },
        },
    }
    const pie = {
        style: {
            cursor: 'pointer',
            padAngle: style.pie_padAngle,
            cornerRadius: style.pie_cornerRadius,
            shadowColor: style.pie_shadowColor,
            shadowBlur: style.pie_shadowBlur,
            shadowOffsetX: style.pie_shadowOffsetX,
            shadowOffsetY: style.pie_shadowOffsetY,
            stroke: style.pie_stroke,
            lineWidth: style.pie_lineWidth
        },
        state: {
            hover: {
                outerRadius: style.pie_hover_outerRadius,
                shadowColor: style.pie_hover_shadowColor,
                shadowBlur: style.pie_hover_shadowBlur,
                shadowOffsetX: style.pie_hover_shadowOffsetX,
                shadowOffsetY: style.pie_hover_shadowOffsetY,
                stroke: style.pie_hover_stroke,
                lineWidth: style.pie_hover_lineWidth
            }
        }
    }
    const rose = {
        visible: true,
        boundsPadding: 16,
        style: {
            cursor: 'pointer',
            padAngle: 0.02,
            cornerRadius: 8,
            shadowColor: style.pie_shadowColor,
            shadowBlur: style.pie_shadowBlur,
            shadowOffsetX: style.pie_shadowOffsetX,
            shadowOffsetY: style.pie_shadowOffsetY,
            stroke: '#262626',
            lineWidth: 0,
        }
    }
    const line = {
        visible: style.line_visible,
        style: {
            cursor: 'pointer',
            lineDash: [0, 0],
            curveType: style.line_curveType,
            lineWidth: style.line_lineWidth,
            opacity: style.line_opacity,
            shadowColor: style.line_shadowColor,
            shadowBlur: style.line_shadowBlur,
            shadowOffsetX: style.line_shadowOffsetX,
            shadowOffsetY: style.line_shadowOffsetY,
        }
    }
    // 图元样式
    const point = {
        visible: style.point_visible,
        style: {
            stroke: null,
            cursor: 'pointer',
            symbolType: style.point_symbolType,
            size: style.point_size,
            lineWidth: style.point_lineWidth,
            fill: style.point_fill,
            fillOpacity: style.point_fillOpacity,
            shadowColor: style.point_shadowColor,
            shadowBlur: style.point_shadowBlur,
            shadowOffsetX: style.point_shadowOffsetX,
            shadowOffsetY: style.point_shadowOffsetY,
        },
        state: {
            dimension_hover: {
                symbolType: style.point_hover_symbolType,
                size: style.point_hover_size
            }
        }
    }
    // 指示卡
    const indicator = {
        limitRatio: 1,
        visible: style.indicator_visible,
        fixed: style.indicator_fixed,
        trigger: style.indicator_trigger,
        title: {
            visible: style.indicator_title_visible,
            space: style.indicator_title_space,
            style: {
                text: style.indicator_title_text,
                fill: style.indicator_title_fill,
                fontSize: style.indicator_title_fontSize,
                fontFamily: style.indicator_title_fontFamily,
                fontWeight: style.indicator_title_fontWeight,
                fontStyle: style.indicator_title_fontStyle,
                underline: style.indicator_title_underline,
                lineThrough: style.indicator_title_lineThrough,
                shadowColor: style.indicator_title_shadowColor,
                shadowBlur: style.indicator_title_shadowBlur,
                shadowOffsetX: style.indicator_title_shadowOffsetX,
                shadowOffsetY: style.indicator_title_shadowOffsetY,
                stroke: style.indicator_title_stroke,
                lineWidth: style.indicator_title_lineWidth
            }
        },
        content: style.indicator_content.map(item => ({
            visible: item.visible,
            space: item.space,
            style: {
                text: datum => {
                    const d = datum ?? data[0]
                    return d[item.text] + item.unit;
                },
                fill: item.fill,
                fontSize: item.fontSize,
                fontFamily: item.fontFamily,
                fontWeight: item.fontWeight,
                fontStyle: item.fontStyle,
                underline: item.underline,
                lineThrough: item.lineThrough,
                shadowColor: item.shadowColor,
                shadowBlur: item.shadowBlur,
                shadowOffsetX: item.shadowOffsetX,
                shadowOffsetY: item.shadowOffsetY,
                stroke: item.stroke,
                lineWidth: item.lineWidth
            }
        }))
    }

    const spec = {
        type,
        stack,
        data: [{ values: data }],
        categoryField: group ? [categoryField, seriesField] : categoryField,
        valueField,
        seriesField: seriesField === '' ? null : seriesField,
        background,
        padding,
        color,
        outerRadius,
        innerRadius,

        axes,
        title, // 通用
        pie,
        rose,
        line,
        point,
        label,
        indicator,
        legends,
        tooltip,
        crosshair,
    }

    return <VChart className='ChartsClass' ref={chartRef} spec={spec} />
}
// Todo     仪表图
export const VChartA03 = ({ data, style }) => {
    const chartRef = useRef()
    const {
        gaugeType, categoryField, valueField, seriesField, background, padding, outerRadius, innerRadius, startAngle, endAngle, centerY
    } = style

    const indicator = {
        limitRatio: 1,
        visible: style.indicator_visible,
        fixed: style.indicator_fixed,
        trigger: style.indicator_trigger,
        offsetY: style.indicator_offsetY,
        title: {
            visible: style.indicator_title_visible,
            space: style.indicator_title_space,
            style: {
                text: style.indicator_title_text,
                fill: style.indicator_title_fill,
                fontSize: style.indicator_title_fontSize,
                fontFamily: style.indicator_title_fontFamily,
                fontWeight: style.indicator_title_fontWeight,
                fontStyle: style.indicator_title_fontStyle,
                underline: style.indicator_title_underline,
                lineThrough: style.indicator_title_lineThrough,
                shadowColor: style.indicator_title_shadowColor,
                shadowBlur: style.indicator_title_shadowBlur,
                shadowOffsetX: style.indicator_title_shadowOffsetX,
                shadowOffsetY: style.indicator_title_shadowOffsetY,
                stroke: style.indicator_title_stroke,
                lineWidth: style.indicator_title_lineWidth
            }
        },
        content: style.indicator_content.map(item => ({
            visible: item.visible,
            space: item.space,
            style: {
                text: datum => {
                    const d = datum ?? data[0]
                    return d[item.text] + item.unit;
                },
                fill: item.fill,
                fontSize: item.fontSize,
                fontFamily: item.fontFamily,
                fontWeight: item.fontWeight,
                fontStyle: item.fontStyle,
                underline: item.underline,
                lineThrough: item.lineThrough,
                shadowColor: item.shadowColor,
                shadowBlur: item.shadowBlur,
                shadowOffsetX: item.shadowOffsetX,
                shadowOffsetY: item.shadowOffsetY,
                stroke: item.stroke,
                lineWidth: item.lineWidth
            }
        }))
    }
    const title = {
        visible: style.title_visible,
        text: style.title_text,
        align: style.title_align,
        innerPadding: style.title_innerPadding,
        textStyle: {
            fill: style.title_fill,
            fontSize: style.title_fontSize,
            fontFamily: style.title_fontFamily,
            fontWeight: style.title_fontWeight,
            fontStyle: style.title_fontStyle,
            textAlign: style.title_textAlign,
            textBaseline: style.title_textBaseline,
            underline: style.title_underline,
            lineThrough: style.title_lineThrough,
            shadowColor: style.title_shadowColor,
            shadowBlur: style.title_shadowBlur,
            shadowOffsetX: style.title_shadowOffsetX,
            shadowOffsetY: style.title_shadowOffsetY,
            background: style.title_background,
            stroke: style.title_stroke,
            lineWidth: style.title_lineWidth,
        }
    }

    const spec = {
        layoutRadius: 'auto',
        type: 'gauge',
        axes: [{ type: 'linear', orient: 'angle', label: { visible: false }, grid: { visible: false } }],
        tooltip: { visible: false },
        data: [{ values: data }, { values: style.gauge_color }],
        categoryField,
        valueField,
        seriesField,
        background,
        padding,
        outerRadius,
        innerRadius,
        startAngle,
        endAngle,
        centerY,
        title,
        indicator,
        gauge: gaugeType === 'circularProgress' ?
            {
                type: 'circularProgress',
                progress: {
                    style: {
                        fill: { gradient: 'conical', stops: style.circular_color },
                        cornerRadius: style.circular_cornerRadius,
                        shadowColor: style.circular_shadowColor,
                        shadowBlur: style.circular_shadowBlur,
                        shadowOffsetX: style.circular_shadowOffsetX,
                        shadowOffsetY: style.circular_shadowOffsetY,
                        stroke: style.circular_stroke,
                        lineWidth: style.circular_lineWidth
                    }
                },
                track: { style: { fill: style.circular_track } }
            } :
            {
                type: 'gauge',
                dataIndex: 1,
                categoryField,
                valueField,
                seriesField,
                segment: {
                    style: {
                        fill: datum => datum['color'],
                        cornerRadius: style.gauge_segment_cornerRadius,
                        shadowColor: style.gauge_segment_shadowColor,
                        shadowBlur: style.gauge_segment_shadowBlur,
                        shadowOffsetX: style.gauge_segment_shadowOffsetX,
                        shadowOffsetY: style.gauge_segment_shadowOffsetY,
                    }
                },
                label: {
                    visible: style.gauge_label_visible,
                    position: style.gauge_label_position,
                    offsetRadius: style.gauge_label_offsetRadius,
                    style: {
                        text: datum => datum['type'],
                        fill: style.gauge_label_fill,
                        fontSize: style.gauge_label_fontSize,
                        fontFamily: style.gauge_label_fontFamily,
                        fontWeight: style.gauge_label_fontWeight,
                        fontStyle: style.gauge_label_fontStyle,
                        underline: style.gauge_label_underline,
                        lineThrough: style.gauge_label_lineThrough,
                        shadowColor: style.gauge_label_shadowColor,
                        shadowBlur: style.gauge_label_shadowBlur,
                        shadowOffsetX: style.gauge_label_shadowOffsetX,
                        shadowOffsetY: style.gauge_label_shadowOffsetY,
                        stroke: style.gauge_label_stroke,
                        lineWidth: style.gauge_label_lineWidth
                    }
                }
            },
        pin: {
            visible: style.pin_visible,
            width: style.pin_width,
            height: style.pin_height,
            style: {
                fill: style.pin_fill,
                shadowColor: style.pin_shadowColor,
                shadowBlur: style.pin_shadowBlur,
                shadowOffsetX: style.pin_shadowOffsetX,
                shadowOffsetY: style.pin_shadowOffsetY,
            }
        },
        pointer: {
            visible: style.pointer_visible,
            width: style.pointer_width,
            height: style.pointer_height,
            style: {
                fill: style.pointer_fill,
                shadowColor: style.pointer_shadowColor,
                shadowBlur: style.pointer_shadowBlur,
                shadowOffsetX: style.pointer_shadowOffsetX,
                shadowOffsetY: style.pointer_shadowOffsetY,
            }
        },
        pinBackground: {
            visible: style.pinBackground_visible,
            width: style.pinBackground_width,
            height: style.pinBackground_height,
            style: {
                fill: style.pinBackground_fill,
                shadowColor: style.pinBackground_shadowColor,
                shadowBlur: style.pinBackground_shadowBlur,
                shadowOffsetX: style.pinBackground_shadowOffsetX,
                shadowOffsetY: style.pinBackground_shadowOffsetY,
            }
        }
    }

    return <VChart className='ChartsClass' ref={chartRef} spec={spec} />
}
// Todo     进度图
export const VChartA04 = ({ data, style }) => {
    const chartRef = useRef()
    const { type, color, background, padding, cornerRadius, radius, innerRadius, seriesField, direction, axes_setUp, legends_setUp } = style
    const title = {
        visible: style.title_visible,
        text: style.title_text,
        align: style.title_align,
        innerPadding: style.title_innerPadding,
        textStyle: {
            fill: style.title_fill,
            fontSize: style.title_fontSize,
            fontFamily: style.title_fontFamily,
            fontWeight: style.title_fontWeight,
            fontStyle: style.title_fontStyle,
            textAlign: style.title_textAlign,
            textBaseline: style.title_textBaseline,
            underline: style.title_underline,
            lineThrough: style.title_lineThrough,
            shadowColor: style.title_shadowColor,
            shadowBlur: style.title_shadowBlur,
            shadowOffsetX: style.title_shadowOffsetX,
            shadowOffsetY: style.title_shadowOffsetY,
            background: style.title_background,
            stroke: style.title_stroke,
            lineWidth: style.title_lineWidth,
        }
    }

    const tooltip = {
        visible: style.tooltip_visible,
        trigger: style.tooltip_trigger,

        // 原图
        mark: {
            visible: style.tooltip_mark_visible,
            position: style.tooltip_mark_position,
            positionMode: style.tooltip_mark_positionMode,
        },

        // 纬度图
        dimension: {
            visible: style.tooltip_dimension_visible,
            position: style.tooltip_dimension_position,
            positionMode: style.tooltip_dimension_positionMode,
        },
        style: {
            panel: {  // 背景框
                padding: style.tooltip_panel_padding,
                backgroundColor: style.tooltip_panel_backgroundColor,
                border: {
                    color: style.tooltip_panel_borderColor,
                    width: style.tooltip_panel_borderWidth,
                    radius: style.tooltip_panel_borderRadius
                },
                shadow: {
                    x: style.tooltip_panel_shadowX,
                    y: style.tooltip_panel_shadowY,
                    blur: style.tooltip_panel_shadowBlur,
                    color: style.tooltip_panel_shadowColor,
                    spread: style.tooltip_panel_shadowSpread,
                }
            },
            titleLabel: {
                fontSize: style.tooltip_titleLabel_fontSize,
                fontFamily: style.tooltip_titleLabel_fontFamily,
                fontColor: style.tooltip_titleLabel_fontColor,
                fontWeight: style.tooltip_titleLabel_fontWeight,
                textAlign: style.tooltip_titleLabel_textAlign,
            },
            shape: {
                size: style.tooltip_shape_size,
                spacing: style.tooltip_shape_spacing
            },
            keyLabel: {
                fontSize: style.tooltip_keyLabel_fontSize,
                fontFamily: style.tooltip_keyLabel_fontFamily,
                fontColor: style.tooltip_keyLabel_fontColor,
                fontWeight: style.tooltip_keyLabel_fontWeight,
                textAlign: style.tooltip_keyLabel_textAlign,
                spacing: style.tooltip_keyLabel_tspacing
            },
            valueLabel: {
                fontSize: style.tooltip_valueLabel_fontSize,
                fontColor: style.tooltip_valueLabel_fontColor,
                textAlign: style.tooltip_valueLabel_textAlign,
                fontFamily: style.tooltip_valueLabel_fontFamily,
                fontWeight: style.tooltip_valueLabel_fontWeight,
                spacing: style.tooltip_valueLabel_tspacing
            },
            spaceRow: style.tooltip_spaceRow
        }
    }


    const axes = axes_setUp.map(item => ({
        animation: true,
        sampling: false,
        visible: item.visible,
        orient: item.orient,
        hover: item.hover,
        trimPadding: item.trimPadding,
        title: {
            visible: item.title_visible,
            space: item.title_space,
            text: item.title_text,
            style: {
                fill: item.title_fill,
                fontSize: item.title_fontSize,
                fontFamily: item.title_fontFamily,
                fontWeight: item.title_fontWeight,
                fontStyle: item.title_fontStyle,
                underline: item.title_underline,
                lineThrough: item.title_lineThrough,
                shadowColor: item.title_shadowColor,
                shadowBlur: item.title_shadowBlur,
                shadowOffsetX: item.title_shadowOffsetX,
                shadowOffsetY: item.title_shadowOffsetY,
                stroke: item.title_stroke,
                lineWidth: item.title_lineWidth
            }
        },
        tick: {
            visible: item.tick_visible,
            tickSize: item.tick_tickSize,
            style: {
                stroke: item.tick_stroke,
            }
        },
        domainLine: {
            visible: item.domainLine_visible,
            style: {
                stroke: item.domainLine_stroke,
            }
        },
        grid: {
            visible: item.grid_visible,
            style: {
                stroke: item.grid_stroke,
                lineDash: [item.grid_lineDashA, item.grid_lineDashB],
            }
        },
        label: {
            visible: item.label_visible,
            formatMethod: val => `${val} ${item.label_text || ''}`,
            autoRotate: true,
            style: {
                fill: item.label_fill,
                fontSize: item.label_fontSize,
                fontFamily: item.label_fontFamily,
                fontWeight: item.label_fontWeight,
                fontStyle: item.label_fontStyle,
                underline: item.label_underline,
                lineThrough: item.label_lineThrough,
                shadowColor: item.label_shadowColor,
                shadowBlur: item.label_shadowBlur,
                shadowOffsetX: item.label_shadowOffsetX,
                shadowOffsetY: item.label_shadowOffsetY,
                stroke: item.label_stroke,
                lineWidth: item.label_lineWidth,
            }
        },
        unit: {
            visible: item.unit_visible,
            text: item.unit_text,
            style: {
                dx: item.unit_dx,
                dy: item.unit_dy,
                fill: item.unit_fill,
                fontSize: item.unit_fontSize,
                fontFamily: item.unit_fontFamily,
                fontWeight: item.unit_fontWeight,
                fontStyle: item.unit_fontStyle,
                underline: item.unit_underline,
                lineThrough: item.unit_lineThrough,
                shadowColor: item.unit_shadowColor,
                shadowBlur: item.unit_shadowBlur,
                shadowOffsetX: item.unit_shadowOffsetX,
                shadowOffsetY: item.unit_shadowOffsetY,
                stroke: item.unit_stroke,
                lineWidth: item.unit_lineWidth,
            }
        }
    }))

    const indicator = {
        limitRatio: 1,
        visible: style.indicator_visible,
        fixed: style.indicator_fixed,
        trigger: style.indicator_trigger,
        offsetY: style.indicator_offsetY,
        title: {
            visible: style.indicator_title_visible,
            space: style.indicator_title_space,
            style: {
                text: style.indicator_title_text,
                fill: style.indicator_title_fill,
                fontSize: style.indicator_title_fontSize,
                fontFamily: style.indicator_title_fontFamily,
                fontWeight: style.indicator_title_fontWeight,
                fontStyle: style.indicator_title_fontStyle,
                underline: style.indicator_title_underline,
                lineThrough: style.indicator_title_lineThrough,
                shadowColor: style.indicator_title_shadowColor,
                shadowBlur: style.indicator_title_shadowBlur,
                shadowOffsetX: style.indicator_title_shadowOffsetX,
                shadowOffsetY: style.indicator_title_shadowOffsetY,
                stroke: style.indicator_title_stroke,
                lineWidth: style.indicator_title_lineWidth
            }
        },
        content: style.indicator_content.map(item => ({
            visible: item.visible,
            space: item.space,
            style: {
                text: datum => {
                    const d = datum ?? data[0]
                    return d[item.text] + item.unit;
                },
                fill: item.fill,
                fontSize: item.fontSize,
                fontFamily: item.fontFamily,
                fontWeight: item.fontWeight,
                fontStyle: item.fontStyle,
                underline: item.underline,
                lineThrough: item.lineThrough,
                shadowColor: item.shadowColor,
                shadowBlur: item.shadowBlur,
                shadowOffsetX: item.shadowOffsetX,
                shadowOffsetY: item.shadowOffsetY,
                stroke: item.stroke,
                lineWidth: item.lineWidth
            }
        }))
    }

    const legends = legends_setUp.map(item => ({
        visible: item.visible,
        orient: item.orient,
        position: item.position,
        padding: item.padding,
        selectMode: item.selectMode,
        allowAllCanceled: item.allowAllCanceled,
        select: item.select,
        title: {
            visible: item.title_visible,
            text: item.title_text,
            align: item.title_align,
            space: item.title_space,
            textStyle: {
                fill: item.title_fill,
                fontSize: item.title_fontSize,
                fontFamily: item.title_fontFamily,
                fontWeight: item.title_fontWeight,
                fontStyle: item.title_fontStyle,
                underline: item.title_underline,
                lineThrough: item.title_lineThrough,
                textAlign: item.title_textAlign,
                textBaseline: item.title_textBaseline,
                shadowColor: item.title_shadowColor,
                shadowBlur: item.title_shadowBlur,
                shadowOffsetX: item.title_shadowOffsetX,
                shadowOffsetY: item.title_shadowOffsetY,
                background: item.title_background,
                stroke: item.title_stroke,
                lineWidth: item.title_lineWidth,
            }
        },
        item: {
            spaceCol: item.item_spaceCol,
            spaceRow: item.item_spaceRow,
            padding: item.item_padding,
            align: item.item_align,
            focus: item.item_focus,
            focusIconStyle: { size: item.item_focusSize },
            background: { style: { cornerRadius: item.item_backRadius } },
            shape: {
                space: item.item_shape_space,
                style: { size: item.item_shape_size }
            },
            label: {
                space: item.item_label_space,
                style: {
                    cursor: 'pointer',
                    fill: item.item_label_fill,
                    fontSize: item.item_label_fontSize,
                    fontFamily: item.item_label_fontFamily,
                    fontWeight: item.item_label_fontWeight,
                    fontStyle: item.item_label_fontStyle,
                    underline: item.item_label_underline,
                    lineThrough: item.item_label_lineThrough,
                    shadowColor: item.item_label_shadowColor,
                    shadowBlur: item.item_label_shadowBlur,
                    shadowOffsetX: item.item_label_shadowOffsetX,
                    shadowOffsetY: item.item_label_shadowOffsetY,
                    stroke: item.item_label_stroke,
                    lineWidth: item.item_label_lineWidth,
                }
            }
        }
    }))

    const spec = {
        data: [{ values: data }],
        type,
        direction,
        [type === 'linearProgress' ? 'xField' : 'valueField']: direction === 'vertical' ? seriesField : 'value',
        [type === 'linearProgress' ? 'yField' : 'categoryField']: direction === 'vertical' ? 'value' : seriesField,
        seriesField,
        axes: type === 'linearProgress' ? axes : false,
        indicator: type !== 'linearProgress' ? indicator : false,
        title,
        tooltip,
        legends,
        color,
        roundCap: true,
        background,
        padding,
        cornerRadius,
        radius,
        innerRadius,
        progress: {
            visible: true,
            style: type === 'linearProgress' ?
                {
                    shadowColor: style.progress_shadowColor,
                    shadowBlur: style.progress_shadowBlur,
                    shadowOffsetX: style.progress_shadowOffsetX,
                    shadowOffsetY: style.progress_shadowOffsetY,
                    stroke: style.progress_stroke,
                    lineWidth: style.progress_lineWidth
                } : {
                    innerPadding: style.progress_innerPadding,
                    outerPadding: style.progress_outerPadding,
                    shadowColor: style.progress_shadowColor,
                    shadowBlur: style.progress_shadowBlur,
                    shadowOffsetX: style.progress_shadowOffsetX,
                    shadowOffsetY: style.progress_shadowOffsetY,
                    stroke: style.progress_stroke,
                    lineWidth: style.progress_lineWidth
                }
        },
        track: type === 'linearProgress' ? { visible: true, style: { fill: style.track_fill } } : { visible: true },
    }


    return <VChart className='ChartsClass' ref={chartRef} spec={spec} />
}

// Todo     水波图
export const VChartA05 = ({ data, style }) => {
    const chartRef = useRef()

    const { background, padding, outlinePadding, maskShape, color, liquid, liquidBackground } = style

    const indicator = {
        limitRatio: 1,
        visible: style.indicator_visible,
        fixed: style.indicator_fixed,
        trigger: style.indicator_trigger,
        offsetY: style.indicator_offsetY,
        title: {
            visible: style.indicator_title_visible,
            space: style.indicator_title_space,
            style: {
                text: style.indicator_title_text,
                fill: style.indicator_title_fill,
                fontSize: style.indicator_title_fontSize,
                fontFamily: style.indicator_title_fontFamily,
                fontWeight: style.indicator_title_fontWeight,
                fontStyle: style.indicator_title_fontStyle,
                underline: style.indicator_title_underline,
                lineThrough: style.indicator_title_lineThrough,
                shadowColor: style.indicator_title_shadowColor,
                shadowBlur: style.indicator_title_shadowBlur,
                shadowOffsetX: style.indicator_title_shadowOffsetX,
                shadowOffsetY: style.indicator_title_shadowOffsetY,
                stroke: style.indicator_title_stroke,
                lineWidth: style.indicator_title_lineWidth
            }
        },
        content: style.indicator_content.map(item => ({
            visible: item.visible,
            space: item.space,
            style: {
                text: datum => {
                    const d = datum ?? data[0]
                    return d[item.text] * 100 + item.unit;
                },
                fill: item.fill,
                fontSize: item.fontSize,
                fontFamily: item.fontFamily,
                fontWeight: item.fontWeight,
                fontStyle: item.fontStyle,
                underline: item.underline,
                lineThrough: item.lineThrough,
                shadowColor: item.shadowColor,
                shadowBlur: item.shadowBlur,
                shadowOffsetX: item.shadowOffsetX,
                shadowOffsetY: item.shadowOffsetY,
                stroke: item.stroke,
                lineWidth: item.lineWidth
            }
        }))
    }
    const title = {
        visible: style.title_visible,
        text: style.title_text,
        align: style.title_align,
        innerPadding: style.title_innerPadding,
        textStyle: {
            fill: style.title_fill,
            fontSize: style.title_fontSize,
            fontFamily: style.title_fontFamily,
            fontWeight: style.title_fontWeight,
            fontStyle: style.title_fontStyle,
            textAlign: style.title_textAlign,
            textBaseline: style.title_textBaseline,
            underline: style.title_underline,
            lineThrough: style.title_lineThrough,
            shadowColor: style.title_shadowColor,
            shadowBlur: style.title_shadowBlur,
            shadowOffsetX: style.title_shadowOffsetX,
            shadowOffsetY: style.title_shadowOffsetY,
            background: style.title_background,
            stroke: style.title_stroke,
            lineWidth: style.title_lineWidth,
        }
    }

    const spec = {
        type: 'liquid',
        valueField: 'value',
        data: { values: data },
        indicatorSmartInvert: true,
        background,
        padding,
        outlinePadding,
        maskShape,
        color: [color],
        indicator,
        title,
        liquid: { style: { fill: { gradient: 'linear', x0: 0, y0: 0, x1: 0, y1: 1, stops: liquid } } },
        liquidBackground: { style: { fillOpacity: 1, fill: liquidBackground } },
        tooltip: { visible: false }
    }


    return <VChart className='ChartsClass' ref={chartRef} spec={spec} />
}

// Todo     三维线图 面积图
export const VChartA06 = ({ data, style, field }) => {
    const chartRef = useRef()

    const { type, background, padding, axes_setUp, legends_setUp } = style
    const color = field.map(item => item.color)

    const title = {
        visible: style.title_visible,
        text: style.title_text,
        align: style.title_align,
        innerPadding: style.title_innerPadding,
        textStyle: {
            fill: style.title_fill,
            fontSize: style.title_fontSize,
            fontFamily: style.title_fontFamily,
            fontWeight: style.title_fontWeight,
            fontStyle: style.title_fontStyle,
            textAlign: style.title_textAlign,
            textBaseline: style.title_textBaseline,
            underline: style.title_underline,
            lineThrough: style.title_lineThrough,
            shadowColor: style.title_shadowColor,
            shadowBlur: style.title_shadowBlur,
            shadowOffsetX: style.title_shadowOffsetX,
            shadowOffsetY: style.title_shadowOffsetY,
            background: style.title_background,
            stroke: style.title_stroke,
            lineWidth: style.title_lineWidth,
        }
    }
    const legends = legends_setUp.map(item => ({
        visible: item.visible,
        orient: item.orient,
        position: item.position,
        padding: item.padding,
        selectMode: item.selectMode,
        allowAllCanceled: item.allowAllCanceled,
        select: item.select,
        title: {
            visible: item.title_visible,
            text: item.title_text,
            align: item.title_align,
            space: item.title_space,
            textStyle: {
                fill: item.title_fill,
                fontSize: item.title_fontSize,
                fontFamily: item.title_fontFamily,
                fontWeight: item.title_fontWeight,
                fontStyle: item.title_fontStyle,
                underline: item.title_underline,
                lineThrough: item.title_lineThrough,
                textAlign: item.title_textAlign,
                textBaseline: item.title_textBaseline,
                shadowColor: item.title_shadowColor,
                shadowBlur: item.title_shadowBlur,
                shadowOffsetX: item.title_shadowOffsetX,
                shadowOffsetY: item.title_shadowOffsetY,
                background: item.title_background,
                stroke: item.title_stroke,
                lineWidth: item.title_lineWidth,
            }
        },
        item: {
            spaceCol: item.item_spaceCol,
            spaceRow: item.item_spaceRow,
            padding: item.item_padding,
            align: item.item_align,
            focus: item.item_focus,
            focusIconStyle: { size: item.item_focusSize },
            background: { style: { cornerRadius: item.item_backRadius } },
            shape: {
                space: item.item_shape_space,
                style: { size: item.item_shape_size }
            },
            label: {
                space: item.item_label_space,
                style: {
                    cursor: 'pointer',
                    fill: item.item_label_fill,
                    fontSize: item.item_label_fontSize,
                    fontFamily: item.item_label_fontFamily,
                    fontWeight: item.item_label_fontWeight,
                    fontStyle: item.item_label_fontStyle,
                    underline: item.item_label_underline,
                    lineThrough: item.item_label_lineThrough,
                    shadowColor: item.item_label_shadowColor,
                    shadowBlur: item.item_label_shadowBlur,
                    shadowOffsetX: item.item_label_shadowOffsetX,
                    shadowOffsetY: item.item_label_shadowOffsetY,
                    stroke: item.item_label_stroke,
                    lineWidth: item.item_label_lineWidth,
                }
            }
        }
    }))
    const axes = axes_setUp.map(item => {
        const orient = {
            mode: '3d',
            animation: true,
            sampling: false,
            orient: item.orient,
            hover: item.hover,
            trimPadding: item.trimPadding,
            title: {
                visible: item.title_visible,
                space: item.title_space,
                text: item.title_text,
                style: {
                    fill: item.title_fill,
                    fontSize: item.title_fontSize,
                    fontFamily: item.title_fontFamily,
                    fontWeight: item.title_fontWeight,
                    fontStyle: item.title_fontStyle,
                    underline: item.title_underline,
                    lineThrough: item.title_lineThrough,
                    shadowColor: item.title_shadowColor,
                    shadowBlur: item.title_shadowBlur,
                    shadowOffsetX: item.title_shadowOffsetX,
                    shadowOffsetY: item.title_shadowOffsetY,
                    stroke: item.title_stroke,
                    lineWidth: item.title_lineWidth
                }
            },
            tick: {
                visible: item.tick_visible,
                tickSize: item.tick_tickSize,
                style: {
                    stroke: item.tick_stroke,
                }
            },
            domainLine: {
                visible: item.domainLine_visible,
                style: {
                    stroke: item.domainLine_stroke,
                }
            },
            grid: {
                visible: item.grid_visible,
                style: {
                    stroke: item.grid_stroke,
                    lineDash: [item.grid_lineDashA, item.grid_lineDashB],
                }
            },
            label: {
                visible: item.label_visible,
                formatMethod: val => `${val} ${item.label_text || ''}`,
                autoRotate: true,

                style: {
                    fill: item.label_fill,
                    fontSize: item.label_fontSize,
                    fontFamily: item.label_fontFamily,
                    fontWeight: item.label_fontWeight,
                    fontStyle: item.label_fontStyle,
                    underline: item.label_underline,
                    lineThrough: item.label_lineThrough,
                    shadowColor: item.label_shadowColor,
                    shadowBlur: item.label_shadowBlur,
                    shadowOffsetX: item.label_shadowOffsetX,
                    shadowOffsetY: item.label_shadowOffsetY,
                    stroke: item.label_stroke,
                    lineWidth: item.label_lineWidth,
                }
            },
            unit: {
                visible: item.unit_visible,
                text: item.unit_text,
                style: {
                    dx: item.unit_dx,
                    dy: item.unit_dy,
                    fill: item.unit_fill,
                    fontSize: item.unit_fontSize,
                    fontFamily: item.unit_fontFamily,
                    fontWeight: item.unit_fontWeight,
                    fontStyle: item.unit_fontStyle,
                    underline: item.unit_underline,
                    lineThrough: item.unit_lineThrough,
                    shadowColor: item.unit_shadowColor,
                    shadowBlur: item.unit_shadowBlur,
                    shadowOffsetX: item.unit_shadowOffsetX,
                    shadowOffsetY: item.unit_shadowOffsetY,
                    stroke: item.unit_stroke,
                    lineWidth: item.unit_lineWidth,
                }
            }
        }
        if (item.orient === 'z') {
            orient.type = 'band'
            orient.width = 600
            orient.height = 200
            orient.depth = 200
        }
        return orient
    })

    const tooltip = {
        visible: style.tooltip_visible,
        trigger: style.tooltip_trigger,

        // 原图
        mark: {
            visible: style.tooltip_mark_visible,
            position: style.tooltip_mark_position,
            positionMode: style.tooltip_mark_positionMode,
        },

        // 纬度图
        dimension: {
            visible: style.tooltip_dimension_visible,
            position: style.tooltip_dimension_position,
            positionMode: style.tooltip_dimension_positionMode,
        },
        style: {
            panel: {  // 背景框
                padding: style.tooltip_panel_padding,
                backgroundColor: style.tooltip_panel_backgroundColor,
                border: {
                    color: style.tooltip_panel_borderColor,
                    width: style.tooltip_panel_borderWidth,
                    radius: style.tooltip_panel_borderRadius
                },
                shadow: {
                    x: style.tooltip_panel_shadowX,
                    y: style.tooltip_panel_shadowY,
                    blur: style.tooltip_panel_shadowBlur,
                    color: style.tooltip_panel_shadowColor,
                    spread: style.tooltip_panel_shadowSpread,
                }
            },
            titleLabel: {
                fontSize: style.tooltip_titleLabel_fontSize,
                fontFamily: style.tooltip_titleLabel_fontFamily,
                fontColor: style.tooltip_titleLabel_fontColor,
                fontWeight: style.tooltip_titleLabel_fontWeight,
                textAlign: style.tooltip_titleLabel_textAlign,
            },
            shape: {
                size: style.tooltip_shape_size,
                spacing: style.tooltip_shape_spacing
            },
            keyLabel: {
                fontSize: style.tooltip_keyLabel_fontSize,
                fontFamily: style.tooltip_keyLabel_fontFamily,
                fontColor: style.tooltip_keyLabel_fontColor,
                fontWeight: style.tooltip_keyLabel_fontWeight,
                textAlign: style.tooltip_keyLabel_textAlign,
                spacing: style.tooltip_keyLabel_tspacing
            },
            valueLabel: {
                fontSize: style.tooltip_valueLabel_fontSize,
                fontColor: style.tooltip_valueLabel_fontColor,
                textAlign: style.tooltip_valueLabel_textAlign,
                fontFamily: style.tooltip_valueLabel_fontFamily,
                fontWeight: style.tooltip_valueLabel_fontWeight,
                spacing: style.tooltip_valueLabel_tspacing
            },
            spaceRow: style.tooltip_spaceRow
        }
    }
    const label = {
        visible: style.label_visible,
        position: style.label_position,
        formatter: style.label_formatter,
        offset: style.label_offset,
        overlap: style.label_overlap,
        smartInvert: style.label_smartInvert,
        style: {
            direction: style.label_direction,
            maxLineWidth: style.label_maxLineWidth,
            fillOpacity: style.label_fillOpacity,
            fontSize: style.label_fontSize,
            fontFamily: style.label_fontFamily,
            fontWeight: style.label_fontWeight,
            fontStyle: style.label_fontStyle,
            underline: style.label_underline,
            lineThrough: style.label_lineThrough,
            suffixPosition: style.label_suffixPosition,
            shadowColor: style.label_shadowColor,
            shadowBlur: style.label_shadowBlur,
            shadowOffsetX: style.label_shadowOffsetX,
            shadowOffsetY: style.label_shadowOffsetY,
            stroke: style.label_stroke,
            lineWidth: style.label_lineWidth
        }
    }
    const line = {
        visible: style.line_visible,
        style: {
            cursor: 'pointer',
            lineDash: [0, 0],
            curveType: style.line_curveType,
            lineWidth: style.line_lineWidth,
            opacity: style.line_opacity,
            shadowColor: style.line_shadowColor,
            shadowBlur: style.line_shadowBlur,
            shadowOffsetX: style.line_shadowOffsetX,
            shadowOffsetY: style.line_shadowOffsetY,
        }
    }
    const point = {
        visible: style.point_visible,
        style: {
            stroke: null,
            cursor: 'pointer',
            symbolType: style.point_symbolType,
            size: style.point_size,
            lineWidth: style.point_lineWidth,
            fill: style.point_fill,
            fillOpacity: style.point_fillOpacity,
            shadowColor: style.point_shadowColor,
            shadowBlur: style.point_shadowBlur,
            shadowOffsetX: style.point_shadowOffsetX,
            shadowOffsetY: style.point_shadowOffsetY,
        },
        state: {
            dimension_hover: {
                symbolType: style.point_hover_symbolType,
                size: style.point_hover_size
            }
        }
    }

    const lineLabel = {
        visible: style.lineLabel_visible,
        style: {
            fontSize: style.lineLabel_fontSize,
            fontFamily: style.lineLabel_fontFamily,
            fontWeight: style.lineLabel_fontWeight,
            fontStyle: style.lineLabel_fontStyle,
            underline: style.lineLabel_underline,
            lineThrough: style.lineLabel_lineThrough,
            shadowColor: style.lineLabel_shadowColor,
            shadowBlur: style.lineLabel_shadowBlur,
            shadowOffsetX: style.lineLabel_shadowOffsetX,
            shadowOffsetY: style.lineLabel_shadowOffsetY,
            stroke: style.lineLabel_stroke,
            lineWidth: style.lineLabel_lineWidth,
        }
    }
    const spec = {
        type: type.slice(0, -2),
        data: { values: data },
        stack: false,
        xField: 'type',
        yField: 'value',
        zField: 'name',
        seriesField: 'name',
        background,
        padding,
        color,
        title,
        legends,
        axes,
        tooltip,
        label,
        line,
        point,
        lineLabel,
        crosshair: { xField: { visible: false } },
    };

    return (
        <VChart
            className='ChartsClass'
            ref={chartRef}
            spec={spec}
            options={{
                disableDirtyBounds: true,
                options3d: {
                    enable: true,
                    enableView3dTransform: true,
                    center: { x: 500, y: 250 }
                }
            }}
        />
    )
}
// Todo     三维饼图
export const VChartA07 = ({ data, style }) => {
    const chartRef = useRef()

    const { legends_setUp, background, outerRadius, padding, colorPalette } = style
    const color = colorPalette.map(item => item.color)

    const title = {
        visible: style.title_visible,
        text: style.title_text,
        align: style.title_align,
        innerPadding: style.title_innerPadding,
        textStyle: {
            fill: style.title_fill,
            fontSize: style.title_fontSize,
            fontFamily: style.title_fontFamily,
            fontWeight: style.title_fontWeight,
            fontStyle: style.title_fontStyle,
            textAlign: style.title_textAlign,
            textBaseline: style.title_textBaseline,
            underline: style.title_underline,
            lineThrough: style.title_lineThrough,
            shadowColor: style.title_shadowColor,
            shadowBlur: style.title_shadowBlur,
            shadowOffsetX: style.title_shadowOffsetX,
            shadowOffsetY: style.title_shadowOffsetY,
            background: style.title_background,
            stroke: style.title_stroke,
            lineWidth: style.title_lineWidth,
        }
    }

    const legends = legends_setUp.map(item => ({
        visible: item.visible,
        orient: item.orient,
        position: item.position,
        padding: item.padding,
        selectMode: item.selectMode,
        allowAllCanceled: item.allowAllCanceled,
        select: item.select,
        title: {
            visible: item.title_visible,
            text: item.title_text,
            align: item.title_align,
            space: item.title_space,
            textStyle: {
                fill: item.title_fill,
                fontSize: item.title_fontSize,
                fontFamily: item.title_fontFamily,
                fontWeight: item.title_fontWeight,
                fontStyle: item.title_fontStyle,
                underline: item.title_underline,
                lineThrough: item.title_lineThrough,
                textAlign: item.title_textAlign,
                textBaseline: item.title_textBaseline,
                shadowColor: item.title_shadowColor,
                shadowBlur: item.title_shadowBlur,
                shadowOffsetX: item.title_shadowOffsetX,
                shadowOffsetY: item.title_shadowOffsetY,
                background: item.title_background,
                stroke: item.title_stroke,
                lineWidth: item.title_lineWidth,
            }
        },
        item: {
            spaceCol: item.item_spaceCol,
            spaceRow: item.item_spaceRow,
            padding: item.item_padding,
            align: item.item_align,
            focus: item.item_focus,
            focusIconStyle: { size: item.item_focusSize },
            background: { style: { cornerRadius: item.item_backRadius } },
            shape: {
                space: item.item_shape_space,
                style: { size: item.item_shape_size }
            },
            label: {
                space: item.item_label_space,
                style: {
                    cursor: 'pointer',
                    fill: item.item_label_fill,
                    fontSize: item.item_label_fontSize,
                    fontFamily: item.item_label_fontFamily,
                    fontWeight: item.item_label_fontWeight,
                    fontStyle: item.item_label_fontStyle,
                    underline: item.item_label_underline,
                    lineThrough: item.item_label_lineThrough,
                    shadowColor: item.item_label_shadowColor,
                    shadowBlur: item.item_label_shadowBlur,
                    shadowOffsetX: item.item_label_shadowOffsetX,
                    shadowOffsetY: item.item_label_shadowOffsetY,
                    stroke: item.item_label_stroke,
                    lineWidth: item.item_label_lineWidth,
                }
            }
        }
    }))

    const spec = {
        type: 'pie3d',
        data: [{ values: data }],
        outerRadius,
        valueField: 'value',
        categoryField: 'type',
        title,
        legends,
        background,
        padding,
        color,
        label: { visible: false }
    };


    return (
        <VChart
            className='ChartsClass'
            ref={chartRef}
            spec={spec}
            options={{
                disableDirtyBounds: true,
                options3d: { enable: true }
            }}
        />
    )
}